<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        /**Element Traversal:
         * 解决的时获取的子节点有文本节点
         * 
         * 一下几种方法跳过text节点只获取element节点
         * childelementCount: 返回子节点数量, 不包含注释和文本
         * firstElementChild: 
         *         .
         *         .
         *         .
        */
       
        // 过去要以跨浏览器方式遍历特定元素的所有子元素
        const parentElement = document.body.querySelector("div")
        let currentChildNode = parentElement.firstChild
        console.log(currentChildNode.nextSibling)

        while (currentChildNode) {
            if (currentChildNode.nodeType === 1) { // 遍历到的某个节点是element节点
                console.log(currentChildNode)
            }

            if (currentChildNode === parentElement.lastChild) { // 如果遍历到最后一个节点就结束循环
                break
            }
            currentChildNode = currentChildNode.nextSibling
        }

        
        currentChildNode = parentElement.firstElementChild

        // 使用Element Traversal做如下简化
        while (currentChildNode) {
            console.log(currentChildNode) // 不用判断是不是element节点, 直接处理
            if (currentChildNode === parentElement.lastElementChild) { // 如果遍历到最后一个节点就结束循环
                break
            }
            currentChildNode = currentChildNode.nextElementSibling
        }

    </script>
</body>
</html>